<template>
  <view class="recharge">
    <view class="recharge-pane">
      <view class="title"> 充值金额 </view>
      <!-- <input class="input" v-model="val" /> -->
      <view class="input">
        <u-input
          height="80"
          v-model="val"
          type="number"
          :custom-style="{ 'font-size': '60rpx', 'font-weight': 'bold' }"
          placeholder=" "
        ></u-input>
      </view>
    </view>
    <view class="recharge-btn" @click="submit"> 确认充值 </view>
  </view>
</template>

<script>
import { moneyRecharge } from "@/utils/api";
import { mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      val: "",
    };
  },
  methods: {
    ...mapActions(["setAttr"]),
    // 确认充值
    submit() {
      var that = this;
      moneyRecharge({
        money: this.val,
      }).then((resp) => {
        console.log("余额充值", resp);
        if (resp.code == 200) {
          // if (resp.data.payRes) {
          const { timeStamp, nonceStr, signType, paySign } = resp.data.payRes;
          uni.requestPayment({
            timeStamp,
            nonceStr,
            package: resp.data.payRes.package,
            signType,
            paySign,
            success: (resp) => {
              console.log("微信支付", resp);
              uni.showToast({
                icon: "none",
                title: "支付成功",
                success: () => {
                  that.setAttr({
                    key: "money",
                    value: Number(that.userInfo.money) + Number(that.val),
                  });
                  setTimeout(() => {
                    uni.redirectTo(
                      {
                        url: "/pages/wallet/wallet",
                      },
                      1500
                    );
                  });
                },
              });
            },
            fail: (error) => {
              uni.showToast({
                icon: "none",
                title: "支付失败",
              });
            },
          });
          // }
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.recharge {
  @include wrapper;
  &-pane {
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 25rpx;
    margin-top: 25rpx;
    .title {
      font-size: 30rpx;
      font-weight: 500;
    }
    .input {
      width: 100%;
      position: relative;
      padding: 20rpx 0 0 50rpx;
      box-sizing: border-box;
      font-size: 60rpx;
      font-weight: bold;
      &::before {
        content: "¥";
        position: absolute;
        left: 0;
        font-size: 56rpx;
      }
    }
  }
  &-btn {
    background-color: #ffffff;
    line-height: 80rpx;
    border-radius: 16rpx;
    text-align: center;
    margin-top: 30rpx;
  }
}
</style>
